<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>折线应用: 路线规划</title>
</head>
<script charset="utf-8" src="https://map.qq.com/api/gljs?v=1.exp&key=EJDBZ-GHO3D-MB24R-HJ3FZ-2B3Y6-52FBX"></script>
<style>
    html,
    body {
        height: 100%;
        margin: 0px;
        padding: 0px;
    }

    #mapContainer {
        width: 100%;
        height: 100%;
    }
	#startbtn{display:block;position:absolute;top:50px;left:50px;z-index:10000;}
</style>
<!--onload="initMap()"-->
<body>
    <div id="mapContainer"></div>
    <button id="startbtn">开始</button>
</body>

</html>
<script>
//注：本例仅为说明流程，不保证严谨


// https://lbs.qq.com/faq/serverFaq/webServiceKey 
// 需要在后台配置白名单
// 应用管理 》 我的应用 在key后面的编辑里 勾选 WebServerAPI 添加域名

var arr=[
	['39.984039,116.307630','39.977263,116.337063'],
	['39.994790,116.324968','39.966905,116.308918']
]


var map;
var polylineLayer=null;
var marker=null
var step=0;
map = new TMap.Map('mapContainer', {
		center: new TMap.LatLng(39.980619,116.321277),//地图显示中心点
		zoom:14	//缩放级别
	});
map.on("click", function(evt) {
	    var lat = evt.latLng.getLat().toFixed(6);
	    var lng = evt.latLng.getLng().toFixed(6);
		var str = lat+','+lng
		console.log(str)
	  });	
var btn = document.getElementById("startbtn");
btn.onclick=function(){
	//alert("click")
	if(polylineLayer){
		polylineLayer.setMap(null)
		marker.setMap(null);
		}
	setTimeout(function(){
			initMap()
			
		},10)	
	
	}


	
function initMap(){
	//初始化地图
	

	//WebServiceAPI请求URL（驾车路线规划默认会参考实时路况进行计算）
	var url="https://apis.map.qq.com/ws/direction/v1/driving/"; //请求路径
	url+="?from="+arr[step][0];  //起点坐标
	url+="&to="+arr[step][1];  //终点坐标
	url+="&output=jsonp&callback=cb" ;	//指定JSONP回调函数名，本例为cb
	url+="&key=EJDBZ-GHO3D-MB24R-HJ3FZ-2B3Y6-52FBX"; //开发key，可在控制台自助创建


	//发起JSONP请求，获取路线规划结果
	jsonp_request(url);
}

//浏览器调用WebServiceAPI需要通过Jsonp的方式，此处定义了发送JOSNP请求的函数
function jsonp_request(url){
	var script=document.createElement('script');
	script.src=url;
	document.body.appendChild(script);
}

//定义请求回调函数，在此拿到计算得到的路线，并进行绘制
function cb(ret){
	console.log(ret)
	var coords = ret.result.routes[0].polyline, pl = [];
	//坐标解压（返回的点串坐标，通过前向差分进行压缩）
	var kr = 1000000;
	for (var i = 2; i < coords.length; i++) {
	  coords[i] = Number(coords[i - 2]) + Number(coords[i]) / kr;
	}
	//将解压后的坐标放入点串数组pl中
	for (var i = 0; i < coords.length; i += 2) {
	  pl.push(new TMap.LatLng(coords[i], coords[i+1]));
	}
	
	display_polyline(pl)//显示路线
	
	var frompos = arr[step][0].split(',')
	var topos = arr[step][1].split(',')
	//标记起终点marker
	marker = new TMap.MultiMarker({ 
		id: 'marker-layer',
		map: map,
		styles: {
			"start": new TMap.MarkerStyle({
				"width": 25,
				"height": 35,
				"anchor": { x: 16, y: 32 },
				"src": 'https://mapapi.qq.com/web/lbs/javascriptGL/demo/img/start.png'
			}),
			"end": new TMap.MarkerStyle({
				"width": 25,
				"height": 35,
				"anchor": { x: 16, y: 32 },
				"src": 'https://mapapi.qq.com/web/lbs/javascriptGL/demo/img/end.png'
			})
		},
		geometries: [{
			"id": 'start',
			"styleId": 'start',
			"position": new TMap.LatLng(frompos[0],frompos[1])
		}, {
			"id": 'end',
			"styleId": 'end',
			"position": new TMap.LatLng(topos[0],topos[1])
		}]
	});
	step++;
}

function display_polyline(pl){
	//创建 MultiPolyline显示折线
	polylineLayer = new TMap.MultiPolyline({
		id: 'polyline-layer', //图层唯一标识
		map: map,//绘制到目标地图
		//折线样式定义
		styles: {
			'style_blue': new TMap.PolylineStyle({
				'color': '#3777FF', //线填充色
				'width': 8, //折线宽度
				'borderWidth': 5, //边线宽度
				'borderColor': '#FFF', //边线颜色
				'lineCap': 'round', //线端头方式
			})
		},
		//折线数据定义
		geometries: [
			{
				'id': 'pl_1',//折线唯一标识，删除时使用
				'styleId': 'style_blue',//绑定样式名
				'paths': pl
			}
		]
	});
}

</script>